<template>
  <div class="container-publish">
    <el-card>
      <!-- 头部区域-->
      <div slot="header">
        <my-bread>{{$route.query.id?"修改文章":"发布文章"}}</my-bread>
      </div>
      <!-- 表单区域-->

      <el-form ref="pubLishForm" label-width="120px" :model="pubLishForm" :rules="rules">
        <!-- 表单区域 标题区-->
        <el-form-item label="标题：" prop="title">
          <el-input v-model="pubLishForm.title"></el-input>
        </el-form-item>
        <!-- 表单区域 内容区-->
        <el-form-item label="内容：" prop="content">
          <quill-editor
            @blur="checkContent()"
            v-model="pubLishForm.content"
            :options="editorOption"
          />
        </el-form-item>
        <!-- 表单区域 封面区-->
        <el-form-item label="封面：" prop="cover.type">
          <!-- @change事件  按钮发生变化 cover.images数组变为空数组  重置数据-->
          <el-radio-group v-model="pubLishForm.cover.type" @change="pubLishForm.cover.images=[]">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
          <!-- 选择封面-->
          <!-- 选择单图的时候-->
          <div v-if="pubLishForm.cover.type===1">
            <!-- 使用组件-->
            <!-- <my-image :value="testImgUrl" @input="testImgUrl=$event"></my-image> -->
            <my-image @confirm="checkCover()" v-model="pubLishForm.cover.images[0]"></my-image>
          </div>
          <!-- 选择三图的时候-->
          <div v-if="pubLishForm.cover.type===3">
            <my-image
              @confirm="checkCover()"
              v-for="i in 3"
              :key="i"
              v-model="pubLishForm.cover.images[i-1]"
            ></my-image>
          </div>
        </el-form-item>
        <!-- 表单区域 频道区-->
        <el-form-item label="频道：" prop="channel_id">
          <my-channel v-model="pubLishForm.channel_id"></my-channel>
        </el-form-item>
        <!-- 表单区域 按钮  发布文章/存入草稿-->
        <el-form-item>
          <el-button type="primary" @click="savaArticle(false)">发布文章</el-button>
          <el-button @click="savaArticle(true)">存入草稿</el-button>
        </el-form-item>
        <el-form-item v-if="$route.query.id">
          <el-button @click="editArticle" type="success">修改文章</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
// 富文本样式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 导入组件
import { quillEditor } from "vue-quill-editor";
export default {
  name: "page-publish",
  components: {
    quillEditor
  },
  data() {
    // 校验封面数据
    const validCoverFn = (rules, value, callback) => {
      // value 封面类型：1 3 0 -1 这些类型，就是cover.type
      // - cover.type === 1 单图，cover.images['图片地址']  必须有且只有一张图片。
      // - cover.type === 3 三图，cover.images['地址1','地址2','地址3'] 必须有三张图
      const images = this.pubLishForm.cover.images;
      if (value === 1) {
        // 单图
        if (images[0] && images.length === 1) {
          // 校验成功执行回调函数
          callback();
        } else {
          callback(new Error("请选择一张图片"));
        }
      } else if (value === 3) {
        //  三图
        if (images[0] && images[1] && images[2]) {
          callback();
        } else {
          callback(new Error("请选择三张封面图"));
        }
      } else {
        callback();
      }
    };
    return {
      // 双向绑定图片地址 组件传值
      // testImgUrl: null,
      // 富文本配置对象
      editorOption: {
        placeholder: "请输入文章内容",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code-block"],
            [{ header: 1 }, { header: 2 }],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ indent: "-1" }, { indent: "+1" }],
            ["image"]
          ]
        }
      },
      // 选择频道
      covers: "",

      // 表单验证
      pubLishForm: {
        // 表单标题
        title: null,
        // 内容
        content: null,
        // 频道
        channel_id: null,
        // 单选框组
        cover: {
          type: 1,
          images: []
        }
      },
      // 验证规则
      rules: {
        // 标题
        title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          { min: 5, max: 30, message: "5-30个字符", trigger: "blur" }
        ],
        // 内容
        content: [
          { required: true, message: "请输入文章内容", trigger: "blur" }
        ],
        // 频道
        channel_id: [
          { required: true, message: "请输入频道", trigger: "change" }
        ],
        // 验证封面
        // 单选项框组绑定的是 pubLishForm.cover.type 它能触发change来进行校验
        "cover.type": [{ validator: validCoverFn, trigger: "change" }]
      }
    };
  },
  created() {
    if (this.$route.query.id) {
      this.getArticle();
    }
  },
  watch: {
    // 监听地址栏的ID数据变化，区分两种业务场景
    "$route.query.id": function() {
      if (this.$route.query.id) {
        // 修改文章  填充表单
        this.getArticle();
      } else {
        // 发布文章 + 重置表单（还原数据，清除校验）
        this.$refs.pubLishForm.resetFields();
        // 赋值数据类型饿了么没有清除，手动清除下
        this.pubLishForm.cover.images = [];
      }
    }
  },
  methods: {
    // 完成修改
    editArticle() {
      // 整体表单校验
      this.$refs.pubLishForm.validate(async valid => {
        if (valid) {
          try {
            // 进行修改请求
            await this.$http.put(
              `articles/${this.$route.query.id}?draft=false`,
              this.pubLishForm
            );
            this.$message.success("修改文章成功");
            this.$router.push("/article");
          } catch (e) {
            // 代码失败的情况下
            this.$message.error("修改文章失败");
          }
        }
      });
    },
    // 获取文章  填充表单
    async getArticle() {
      const res = await this.$http.get(`articles/${this.$route.query.id}`);
      this.pubLishForm = res.data.data;
    },
    // 触发文章内容校验
    checkContent() {
      // 通过表单组件来使用声明好的content校验规则去校验content字段
      // 表单组件提供一个函数：validateField('字段名字') 进行校验
      this.$refs.pubLishForm.validateField("content");
    },
    //  触发文章封面校验
    checkCover() {
      // 触发cover.type校验规则，去校验封面图数据
      this.$refs.pubLishForm.validateField("cover.type");
    },
    // 发布文章
    savaArticle(draft) {
      // 整体表单校验
      this.$refs.pubLishForm.validate(async valid => {
        // 如果valid存在
        if (valid) {
          try {
            // 发送请求
            await this.$http.post(`articles?draft=${draft}`, this.pubLishForm);
            // 成功提示
            this.$message.success(draft ? "存入草稿成功" : "发布文章成功");
            // 跳转内容管理
            this.$router.push("/article");
          } catch (e) {
            // 失败提示
            this.$message.success(draft ? "存入草稿失败" : "发布文章失败");
          }
        }
      });
    }
  }
};
</script>
 <style lang='less' scoped>
// ::v-deep 是深度作用符号，让选择器在其他组件下也生效。
::v-deep .ql-editor {
  height: 250px;
}
::v-deep .ql-toolbar.ql-snow {
  padding: 0 8px;
}
</style>
